// 将css当模块化使用
import * as style from './styles/index.css'
import * as scss from './styles/test.scss'
import $ from 'jquery'
// import {
//   test
// } from './main'

console.log(scss.span)
// console.log(test)


// 动态导入
const dynamicImport = () => {
  /* webpackChunkName: 'math', webpackPreload: true */
  import( /* webpackChunkName: 'math', webpackPrefetch: true */ './async.js').then(({
    add
  }) => {
    console.log(add(4, 5))
  })
  import( /* webpackChunkName: 'test', webpackPreload: true */ './test.ts').then(({
    test
  }) => {
    console.log(test('hhh'))
  })
}

const handleFetch = () => {
  console.log($('span'))
  fetch('/api/user').then(res => {
    console.log(res)
    return res.text()
  })
    .then(re => {
      console.log(re)
    })
    .catch(err => {
      console.log(err);
    })
}

// 动态导入 (懒加载)
const dynamic = document.createElement('button')
const button = document.createElement('button')

dynamic.textContent = '动态导入js/ts'
button.textContent = 'proxy代理'

dynamic.classList.add(scss.span)
// button.classList.add(style.button)

dynamic.addEventListener('click', () => dynamicImport())
button.addEventListener('click', () => handleFetch())

document.body.appendChild(button)
document.body.appendChild(dynamic)

// 使用work
const work = new Worker(new URL('./work.js', import.meta.url))
work.postMessage({
  title: '主线程传过去的'
})

work.onmessage = (e) => {
  console.log('主线程收到的', e.data)
}

export const other = () => {
  return 'other'
}